<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JS</title>
	<style>
		body{
			margin: 0;
			padding: 0;
		}

		#pic{
			margin: 0 auto;
			width: 1240px;
			height: 480px;
			overflow: hidden;
			position: relative;
		}

		#imglist{	
			margin: 0;
			padding: 0;
			position: absolute;
			float: left;
			top: 0;
			left: 0;
		}

		#imglist li{
			float: left;
			list-style: none;
			width: 1240px;
			height: 480px;

		}

		img{
			display: none;
		}

		#num{
			margin: 0;
			padding: 0;
			position: absolute;
			top: 430px;
			left: 30px;
			z-index: 10;
			display: block;
		}

		#num li{
			float: left;
			list-style: none;
			margin-left: 5px;
			width: 30px;
			height: 30px;
			border: 1px solid #666;
			color: #000;
			text-align: center;
			line-height: 30px;
			font-weight: bold;
		}


	</style>
</head>
<body>
	<div id="pic">
		<ul id="imglist">
			<li><img src="1.jpg" width="1240px" height="480px" style="display: block;"></li>
			<li><img src="2.jpg" width="1240px" height="480px" ></li>
			<li><img src="3.jpg" width="1240px" height="480px" ></li>
			<li><img src="4.jpg" width="1240px" height="480px" ></li>
			<li><img src="5.jpg" width="1240px" height="480px" ></li>
			<div style="clear:both;"></div>
		</ul>
		<ul id="num">
			<li style="border:1px solid yellow">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</div>

	<script>
		var imglist = document.getElementById('imglist'); //ul对象
		var imgss = document.getElementsByTagName('img');	//图片对象
		var pic = document.getElementById('pic');	//最外面的div对象
		var num = document.getElementById('num').getElementsByTagName('li'); 	//切换的数字 的 对象
		var n = 1; //从第二张图开始切换

		console.log(imgss);
		console.log(typeof(imgss));

		timer = setInterval('auto()',1000); 							//定时器

		function auto(){												//自动切换函数
			if(n > 4){
				n = 0;													//实现图片循环播放
			}

			for (var i = 0; i<imgss.length; i++) {						//循环，将图片序号跟计时的参数n
				if(i == n){												//联系起来，图片随着n的变化而变化
					show(i);
				}else{
					hidden(i);
				}
			}
			
			imglist.style.top = n * (-480) + "px"; 						//根据图片高度设置图片切换
			n++;

		}

		function show(i){
			imgss[i].style.display = "block";					//(除了显示的，其他都隐藏)
			for(var m = 0; m < num.length; m++){
				num[m].style.border = '1px solid #666';
			}
			num[i].style.border = '1px solid #ff0';
		}

		function hidden(i){
			imgss[i].style.display = "none";
			num[i].style.border = "1px solid #666";
		}



		for(var j = 0; j<num.length ; j++){
			( function(j){
				num[j].onmouseover =function(){
				clearInterval(timer);
				imglist.style.top = j * (-480) + "px";
				show(j);
				n = j+1;

				}

				num[j].onmouseout =function(){
				timer = setInterval('auto()',1000);
				}
			})(j);
		}


	</script>
</body>
</html>